<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />		
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
	</head>
	<style>
		body {
			background-color: #CCC;
		}
		.margin{
			margin-top: 46px;
		}
		/* .red {
			height: 120px;
			padding-top: 20px;
			padding-left: 20px;
			background-color: red;
			color: white;
		} */

		.distance {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.left-float {
			float: left;
		}	
		.white {
			background-color: white;
			padding-top: 10px;
		}

		a {
			color: black;
		}

		.color-white {
			color: white;
		}
		
	</style>
	<body>
		<div id="app" class="margin">
			<header>
				<van-cell @click="login" style="background-color: red; padding-top: 50px;">
					<div slot="title">
						<img class="left-float" style="width:100px; height:100px; border-radius:50%; overflow:hidden;" :src="head_src"/>
						<label class="left-float color-white" style="padding: 10px 0px 0px 10px;">{{head_user}}</label>
					</div>
					
				</van-cell>
			</header>
			<section>
				<div class="white">
					<van-row class="distance">
						<van-col span="6">
							<div style="text-align: center;">
								<van-icon size="30px" name="shopping-cart-o"></van-icon>
							</div>
							<div style="text-align: center;">
								<a @click="daifukuan">待付款</a>
							</div>
						</van-col>
						<van-col span="6">
							<div style="text-align: center;">
								<van-icon size="30px" name="records"></van-icon>
							</div>
							<div style="text-align: center;">
								<a @click="daishouhuo">待收货</a>
							</div>
						</van-col>
						<van-col span="6">
							<div style="text-align: center;">
								<van-icon size="30px" name="comment-circle-o"></van-icon>
							</div>
							<div style="text-align: center;">
								<a @click="daipinglun">待评论</a>
							</div>
						</van-col>
						<van-col span="6">
							<div style="text-align: center;">
								<van-icon size="30px" name="orders-o"></van-icon>
							</div>
							<div style="text-align: center;">
								<a @click="wodedingdan">我的订单</a>
							</div>
						</van-col>
					</van-row>
				</div>
				<br />
				<van-cell title="个人资料" icon="user-o" is-link @click="person" />
				</van-cell>
				<van-cell title="收货地址" icon="location-o" is-link @click="shouhuo">
				</van-cell>
				<van-cell title="我的收藏" icon="like-o" is-link @click="shoucang">
				</van-cell>
				<br />
				<van-cell title="设置" icon="setting-o" is-link @click="shezhi">
				</van-cell>
			</section>
		</div>
		<script>
			var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
			newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
			var vm = new Vue({
				el: "#app",
				data: {
					head_src: "https://tvax4.sinaimg.cn/crop.0.0.888.888.180/006Dh9Zbly8ft1i9uqjjkj30oo0oo0ue.jpg",
					head_user: "未登录"
				},
				created: function() {
					var _this= this;
					console.log(newUser);//用户信息
					if (newUser != null) {
						_this.head_user = newUser.UserData.NickName; //用户名
						_this.head_src="https://tvax4.sinaimg.cn/crop.0.0.888.888.180/006Dh9Zbly8ft1i9uqjjkj30oo0oo0ue.jpg";//指定的图片
						//_this.head_src = newUser.UserData.AvatarImage; //用户头像
					}
				},
				methods: {
					login: function() { //登录
						if (newUser != null) {
							plus.webview.open("grzl.html", "grzl");
						} else {
							plus.webview.open("login.html", "login");
						}
					},
					daifukuan: function() { //待付款
						console.log(123)
						plus.webview.open("dfk.html", "dfk");
					},
					daishouhuo: function() { //待收货
						console.log(123)
						plus.webview.open("daishouhuo.html", "dfk");
					},
					daipinglun: function() { //待评论
						console.log(123)
						plus.webview.open("daipinglun.html", "dfk");
					},
					wodedingdan: function() { //我的订单
						console.log(123)
						plus.webview.open("dingdan.html", "dfk");
					},
					person: function() { //个人资料
						plus.webview.open("grzl.html", "grzl");
					},
					shouhuo: function() { //收货地址
						plus.webview.open("shdz.html", "shdz");
					},
					shoucang: function() { //我的收藏
						plus.webview.open("sc.html", "sc");
					},
					shezhi: function() { //设置
						plus.webview.open("shezhi.html", "shezhi");
					}
				},

			})
		</script>
	</body>
</html>